<template>
  <div class="container">
    <div class="btn">
      <el-button @click="establish('establish')" type="primary">创建</el-button>
      <el-button @click="categoryEnable" type="primary">启用</el-button>
      <el-button @click="categoryDisable" type="primary">停用</el-button>
    </div>
    <el-table :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange"
      tooltip-effect="dark">
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column prop="name" align="center" label="分类">
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.isEnable == '0'">未启用</span>
          <span v-if="scope.row.isEnable == '1'">已启用</span>
        </template>
      </el-table-column>
      <el-table-column prop="modifyorName" align="center" label="创建人" width="180">
      </el-table-column>
      <el-table-column prop="modifyTime" align="center" label="日期" width="180">
      </el-table-column> 
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="establish('Edit', scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="deteles(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination :query="query" @getData="getData" :total="total" />
    </div>
    <el-dialog title="创建栏目" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- <el-form-item label="是否启用" prop="delivery" label-width="80px">
          <el-switch v-model="form.isEnable"></el-switch>
        </el-form-item> -->
        <el-form-item label="栏目名称" prop="name" label-width="80px">
          <el-input v-model="form.name" placeholder="请输入分类名称" style="width: 60%"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="coverImg" label-width="80px">
          <div v-on:click="uploadCover()" v-if="form.iconImg && form.iconImg.length == 0">
            <img src="./../../assets/image/7.png" style="width: 250px; cursor: pointer" alt="" />
          </div>
          <elUploadImages v-if="form.iconImg && form.iconImg.length > 0" :isMultiple="false" :limit="1"
            :imageList="form.iconImg" @callbackImg="uploadImage" />
        </el-form-item>
        <el-form-item label="新闻发布人" prop="name" label-width="90px">
          <div class="display: flex;">
            <div>
              <el-tag :key="tag" v-for="tag in form.newsPushors" style="margin-right: 10px" :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag.userName }}
              </el-tag>
              <el-button plain icon="el-icon-plus" style="margin-left: 10px"
                @click="selectPerson('issue')">添加</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="新闻审核人" prop="name" label-width="90px">
          <div class="display: flex;">
            <div>
              <el-tag :key="tag" v-for="tag in form.newsApprovers" style="margin-right: 10px"
                :disable-transitions="false" @close="handleClose(tag)">
                {{ tag.userName }}
              </el-tag>
              <el-button plain icon="el-icon-plus" style="margin-left: 10px"
                @click="selectPerson('check')">添加</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="creation">确 定</el-button>
      </div>
    </el-dialog>
    <div ref="cutBox" style="visibility: hidden">
      <ImgCutter @cutDown="cutDown" :cancel="cancelCut" :confirm="cancelCut" rate="3:2" ref="imageCutter">
        <el-button slot="cancel" v-on:click="cancelCut()">取消</el-button>
        <el-button slot="confirm" type="primary" style="margin-left: 10px" v-on:click="cancelCut()">确定</el-button>
      </ImgCutter>
    </div>
  </div>
</template>

<script>
import ImgCutter from 'vue-img-cutter';
import elUploadImages from '@/components/elUploadImages'; //图片上传
import Pagination from '@/components/Pagination';
import {
  categoryAdd,
  findPage,
  deletes,
  edit,
  categoryEnable,
  categoryDisable,
} from '../../api/index';
export default {
  name: 'invitation',
  components: { Pagination, elUploadImages, ImgCutter },
  data () {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        // isEnable: false,
        iconImg: [],
        newsApprovers: [], //新闻审核
        newsPushors: [], //新闻发布issue
      },
      issue: [], //新闻发布
      check: [], //新闻审核
      sort: '',
      row: '',
      userid: [],
      total: 0,
      dataList: [],
      query: {
        offset: 1,
        limit: 10,
      },
      fileList: [],
    };
  },
  created () {
    this.getData();
  },
  methods: {
    cancelCut () {
      // this.$refs.imageCutter.visible = false;
      this.$refs.cutBox.style.visibility = 'hidden';
      this.dialogFormVisible = true;
    },
    uploadCover () {
      // visibility: visible
      this.dialogFormVisible = false;
      this.$refs.cutBox.style.visibility = 'visible';
      this.$nextTick(() => {
        this.$refs.imageCutter.handleOpen();
        this.$refs.imageCutter.visible = true;
      });
      this.$forceUpdate();
      console.log(this.$refs.imageCutter);
    },
    cutDown (event) {
      console.log(event);
      let form = new FormData();
      form.append('file', event.file);
      this.$http
        .post(
          'http://139.215.190.237:8081/api/management/addNews/uploadfile',
          form
        )
        .then(
          (res) => {
            this.form.iconImg = [res.data.data];
            this.cancelCut();
          },
          (error) => {
            this.$message.error('上传失败');
            this.cancelCut();
          }
        );
    },

    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    async categoryEnable () {
      //栏目启用
      if (this.multipleSelection == undefined)
      {
        this.$message('请先选择条目');
        return;
      }
      let userId = this.multipleSelection
        .map((item) => item.id)
        .join(',');
      let result = await categoryEnable({ ids: userId });
      if (result.data.status == 100)
      {
        this.$message.success('启用成功');
        this.getData();
      }
    },
    async categoryDisable () {
      //栏目停用
      if (this.multipleSelection == undefined)
      {
        this.$message('请先选择条目');
        return;
      }
      let userId = this.multipleSelection
        .map((item) => item.id)
        .join(',');
      let result = await categoryDisable({ ids: userId });
      if (result.data.status == 100)
      {
        this.$message.success('停用成功');
        this.getData();
      }
    },
    async selectPerson (row) {
      this.userid = [];
      if( row == 'issue'){
        this.userid = this.form.newsPushors==''?[]:this.form.newsPushors.map((item) => item.userId)
      }else{
        this.userid = this.form.newsApprovers==''?[]:this.form.newsApprovers.map((item) => item.userId)
      }
      let result = await this.$ddapi.selectOrg([...this.userid]);
      if (result.users.length)
      {
        if (row == 'issue')
        {
          this.form.newsPushors = [];
          result.users.map((item) => {
            this.form.newsPushors.push({
              userName: item.name,
              userId: item.emplId,
            });
          });

        } else
        {
          this.form.newsApprovers = [];
          result.users.map((item) => {
            this.form.newsApprovers.push({
              userName: item.name,
              userId: item.emplId,
            });
          });
        }
      }
    },
    //封面图
    uploadImage (value) {
      console.log(value, '上传封面图片的结果1111');
      this.form.iconImg = value;
    },
    async establish (sort, row) {
      this.sort = sort;
      this.row = row;
      this.dialogFormVisible = true;
      if (sort == 'Edit')
      {
        this.form.name = this.row.name;
        this.form.iconImg = this.row.iconImg;
        this.form.newsApprovers = this.row.newsApprovers;
        this.form.newsPushors = this.row.newsPushors;
        this.form.id = this.row.id;
      
        this.form.iconImg = this.form.iconImg
          ? [this.form.iconImg]
          : [];
        // this.form.isEnable == '1'
        //   ? (this.form.isEnable = false)
        //   : (this.form.isEnable = true);
      } else
      {
        this.form = {
          name: '',
          // isEnable: false,
          iconImg: [],
          newsApprovers: [], //新闻审核
          newsPushors: [], //新闻发布issue
        };
      }
    },
    creation () {
      this.sort == 'establish' ? this.confirm() : this.Edit();
    },
    async Edit () {
      this.form.isEnable=this.row.isEnable
      this.form.iconImg =
        this.form.iconImg && this.form.iconImg.length > 0
          ? this.form.iconImg.toString()
          : '';
      // this.form.isEnable == false
      //   ? (this.form.isEnable = '1')
      //   : (this.form.isEnable = '0');
      this.dialogFormVisible = true;
      // this.row.name = this.form.name

      let res = await edit(this.form);
      if (res.data.status == 100)
      {
        this.getData();
        this.$message.success('修改成功');
        this.dialogFormVisible = false;
      }
    },
    async deteles (id) {
      let result = await this.$publicJS.delConfirm('确定要删除吗');
      if (result)
      {
        let res = await deletes({ ids: id });
        if (res.data.status == 100)
        {
          this.$message.success('删除成功');
          this.getData();
        }
      }
    },
    async getData () {
      let res = await findPage(this.query);
      if (res.data.status == 100)
      {
        this.dataList = res.data.data.list;
        this.total = res.data.data.total;
      }
    },
    async confirm () {
      try
      {
        if (this.form.name == '')
        {
          this.$message('分类不能为空');
          return;
        }
        this.form.iconImg =
          this.form.iconImg && this.form.iconImg.length > 0
            ? this.form.iconImg.toString()
            : '';
        // this.form.isEnable == false
        //   ? (this.form.isEnable = '1')
        //   : (this.form.isEnable = '0');
        let res = await categoryAdd(this.form);
        if (res.data.status == 100)
        {
          this.$message.success('创建成功');
          this.dialogFormVisible = false;
          this.form.iconImg = this.form.iconImg
            ? [this.form.iconImg]
            : [];
          this.getData();
        }
      } catch (error)
      {
        this.form.iconImg = this.form.iconImg
          ? [this.form.iconImg]
          : [];
        return false;
      }
    },
  },
};
</script>

<style scoped>
.btn {
  /* display: flex;
  flex-flow: row-reverse wrap; */
  margin-bottom: 2rem;
}
</style>
